<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台--文章管理</title>
    <link rel="stylesheet" type="text/css" href="<?php echo isset($skin)?$skin:"";?>images/style.css" />
    <base target="_self"/>

    <script src='<?php echo isset($skin)?$skin:"";?>js/jquery.min.js'></script>
    <script type="text/javascript" src="<?php echo isset($skin)?$skin:"";?>js/jquery.form.min.js"></script>
    <script type="text/javascript" src="<?php echo isset($skin)?$skin:"";?>js/dist/dialog-min.js"></script>
    <script src="<?php echo isset($skin)?$skin:"";?>js/admin.js"></script>
    <script type="text/javascript">
        <!--
        $(document).ready(function () {
            $('.new_table tbody tr:even').addClass('h'); //奇偶变色，添加样式
        });
        //-->
    </script>
    <script type="text/javascript" charset="UTF-8" src="<?php echo isset($skin)?$skin:"";?>/js/validate.js"></script>
    <script type="text/javascript" charset="UTF-8" src="<?php echo isset($skin)?$skin:"";?>js/artTemplate.js"></script>
    <script type="text/javascript" charset="UTF-8" src="<?php echo isset($skin)?$skin:"";?>js/artTemplate-plugin.js"></script>
    <script type="text/javascript" charset="UTF-8" src="<?php echo isset($skin)?$skin:"";?>js/form.js"></script>
    <script type="text/javascript" charset="UTF-8" src="<?php echo isset($skin)?$skin:"";?>js/artDialog.js"></script>
<script type="text/javascript" charset="UTF-8" src="<?php echo isset($skin)?$skin:"";?>js/iframeTools.js"></script>
<link rel="stylesheet" href="<?php echo isset($skin)?$skin:"";?>js/artdialog.css" type="text/css">
</head>
<body>
<div class="hh6"></div>
<body style="width:670px;min-height:400px;">
<div class="pop_win">
    <p>
        <button type="button" class="btn fr" onclick="addSpec()"><span class="add">增加规格项</span></button>
        1、增加规格项或选择规格标签 >> 2、添加需要的规格值 >> 保存
    </p>

    <!--规格按钮-->
    <ul class="tab"></ul>

    <!--规格标签按钮-->
    <script type='text/html' id='specButtonTemplate'>
        <%for(var item in templateData){%>
        <%include('specButtonLiTemplate',{'item':templateData[item]})%>
        <%}%>
    </script>

    <!--规格标签按钮-->
    <script type='text/html' id='specButtonLiTemplate'>
        <li id="specButton<%=item['id']%>">
            <a href="javascript:void(0);" style="display:inline;padding-right:8px;" onclick="selectTab(<%=item['id']%>);" hidefocus="true"><%=item['name']%></a>
            <label class="radio"><img src="<?php echo isset($skin)?$skin:"";?>images/icon_del.gif" class="delete" title="删除" onclick="delSpec(<%=item['id']%>,this);" /></label>
        </li>
    </script>

    <table class="spec" width="95%" cellspacing="0" cellpadding="0" border="0">

        <!--全部的规格,水平样式规格-->
        <tr>
            <td id="horizontalBox"></td>

            <!--水平规格列表-->
            <script type='text/html' id='horizontalSpecTemplate'>
                <%for(var item in templateData){%>
                <%include('horizonalSpecDlTemplate',{'item':templateData[item]})%>
                <%}%>
            </script>

            <!--水平规格单行-->
            <script type='text/html' id='horizonalSpecDlTemplate'>
                <%var className = item['type']==1 ? 'w_27':'w_45'%>
                <dl class="summary clearfix" id="horizontal_<%=item['id']%>" style='display:none'>
                    <dt><label class="red">点击选择</label>下列《<%=item['name']%>》：如果没有您需要的《<%=item['name']%>》？请到规格列表中编辑<%=item['name']%></dt>
                    <dd class="<%=className%>">
                        <%var valueList = item['value'].split(',');%>
                        <%for(var result in valueList){%>
                        <div class="item">
                            <a href="javascript:selectSpec({'id':<%=item['id']%>,'value':'<%=valueList[result]%>','name':'<%=item['name']%>','type':<%=item['type']%>});">
                                <%if(item['type']==1){%>
                                <%=valueList[result]%>
                                <%}else{%>
                                <img src="/<%=valueList[result]%>" width="30px" height="30px"/>
                                <%}%>
                            </a>
                        </div>
                        <%}%>
                    </dd>
                </dl>
            </script>
        </tr>

        <!--已存在的规格,垂直样式规格-->
        <tr>
            <td>
                <div class="cont" id="verticalBox" style='display:none'>
                    <table class="border_table" width="100%" style="margin-top:0px;">
                        <thead>
                        <tr>
                            <th>规格值</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                        <!--垂直规格列表-->
                        <script type='text/html' id='verticalSpecTemplate'>
                            <%for(var item in templateData){%>
                            <%item = templateData[item]%>
                            <tbody id="vertical_<%=item['id']%>" style='display:none'>
                            <%var tempSpecArray = item['value'].split(',')%>
                            <%for(var result in tempSpecArray){%>
                            <%result = tempSpecArray[result]%>
                            <%if(result){%>
                            <%include('verticalRowTemplate',{'id':item['id'],'name':item['name'],'type':item['type'],'value':result})%>
                            <%}%>
                            <%}%>
                            </tbody>
                            <%}%>
                        </script>

                        <!--垂直规格单行-->
                        <script type='text/html' id='verticalRowTemplate'>
                            <tr class='td_c'>
                                <td>
                                    <input type="hidden" name="specJson" value='{"id":"<%=id%>","name":"<%=name%>","type":"<%=type%>","value":"<%=value%>"}' />
                                    <%if(type == 1){%><%=value%><%}else{%><img width="30px" height="30px" src="/<%=value%>" class="img_border" /><%}%>
                                </td>
                                <td>
                                    <img class="operator" src="<?php echo isset($skin)?$skin:"";?>images/icon_asc.gif" onclick="positionUp($(this).parent().parent(),$(this).parent().parent().parent());" alt="向上" />
                                    <img class="operator" src="<?php echo isset($skin)?$skin:"";?>images/icon_desc.gif" onclick="positionDown($(this).parent().parent(),$(this).parent().parent().parent());" alt="向下" />
                                    <img class="operator" src="<?php echo isset($skin)?$skin:"";?>images/icon_del.gif" onclick="itemRemove($(this).parent().parent());" alt="删除" />
                                </td>
                            </tr>
                        </script>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

<script language="javascript">
    //DOM加载完毕
    $(function()
    {
        //规格按钮标签

        //规格垂直列表显示

        //默认激活一个规格按钮
        defaultHoverSpecButton();
    });

    /**
     * 从已有的规格进行点选
     * @param specJson js对象 id,name,value,type
     */
    function selectSpec(specJson)
    {
        $('#verticalBox').show();

        //某规格小容器是否存在
        var specTbody = $('#vertical_'+specJson.id);
        if(specTbody.length == 0)
        {
            var verticalSpecHtml = template.render('verticalSpecTemplate',{'templateData':[specJson]});
            $('#verticalBox .border_table').append(verticalSpecHtml);
        }
        else
        {
            //规格值是否已经存在
            var matchValue = '"value":"'+specJson.value+'"';
            if(specTbody.find('input:hidden[value*=\''+matchValue+'\']').length > 0)
            {
                alert('此规格值已经添加过了');
                return;
            }

            var verticalRowHtml = template.render('verticalRowTemplate',specJson);
            specTbody.append(verticalRowHtml);
        }
        $('#vertical_'+specJson.id).show();
    }

    /**
     * 选择当前Tab
     * @param spec_id 规格ID
     * @param _self 按钮本身
     */
    function delSpec(spect_id,_self)
    {
        art.dialog.confirm('确定要删除么？',function(){
            //移除tab规格标签按钮
            $(_self).parent().parent().remove();

            //移除水平规格
            $('#horizontal_'+spect_id).remove();

            //移除垂直规格
            $('#vertical_'+spect_id).remove();

            defaultHoverSpecButton();
        });
    }

    //默认激活规格按钮
    function defaultHoverSpecButton()
    {
        //已经没有待选择规格
        if($('.tab>li').length == 0)
        {
            $('#verticalBox').hide();
        }
        else
        {
            //默认激活第一个规格
            $('.tab>li:first a').trigger('click');
        }
    }

    //添加模型规格
    function addSpec()
    {
        art.dialog.open('/admin.php?c=goods&a=select_spec&seller_id=', {
            title: '选择规格',
            okVal:'保存',
            ok:function(iframeWin, topWin){
                var specChecked = $(iframeWin.document).find('[name="spec"]:checked');
                if(specChecked.length == 1)
                {
                    var specJson = $.parseJSON(specChecked.val());

                    //监测规格是否已经存在
                    if($('#horizontal_'+specJson.id).length > 0)
                    {
                        alert('规格已经被添加，不能重复添加');
                        return false;
                    }

                    //规格按钮标签
                    var specButtonLiHtml = template.render('specButtonLiTemplate',{'item':specJson});
                    $('.tab').append(specButtonLiHtml);

                    //规格水平列表展示
                    var horizonalSpecDlHtml = template.render('horizonalSpecDlTemplate',{'item':specJson});
                    $('#horizontalBox').append(horizonalSpecDlHtml);

                    //激活新添加的规格
                    $('.tab>li:last a').trigger('click');
                }
            }
        });
    }

    /**
     * 选择当前Tab
     * @param spec_id 规格ID
     */
    function selectTab(spec_id)
    {
        //隐藏垂直规格外部
        if($('.tab>li').length == 0)
        {
            $('#verticalBox').hide();
        }
        else
        {
            $('#verticalBox').show();
        }

        //按钮高亮
        $('.tab>li').removeClass('selected');
        $('#specButton'+spec_id).addClass('selected');

        //水平规格展示
        $('[id^="horizontal_"]').hide();
        $('#horizontal_'+spec_id).show();

        //垂直规格展示
        $('[id^="vertical_"]').hide();
        $('#vertical_'+spec_id).show();
    }

    //项上升
    function positionUp(_self,container)
    {
        var childrenIndex = container.children().index(_self);
        if(childrenIndex == 0)
        {
            return;
        }
        _self.insertBefore(container.children().get(childrenIndex-1));
    }

    //项下降
    function positionDown(_self,container)
    {
        var childrenIndex = container.children().index(_self);
        if(childrenIndex == container.children().length - 1)
        {
            return;
        }
        _self.insertAfter(container.children().get(childrenIndex+1));
    }

    //项删除
    function itemRemove(_self)
    {
        art.dialog.confirm('确定要删除么？',function(){_self.remove()});
    }
</script>
<script type="text/javascript">
    <!--
    $(document).ready(function () {
        $('.new_table tbody tr:even').addClass('h'); //奇偶变色，添加样式
    });
    //-->
</script>
</body>
</html>